<template>
  <div class="activityDetail">
    <div class="content">
      <div class="title">
        <span>{{data.hdmc}}</span>
        <span class="red">{{zt}}</span>
      </div>
      <div class="item fixWidth">
        <div><van-icon name="clock" />活动时间</div>
        <div>{{`${kssj||'2019/06/08'}—${jssj||'2019/06/08'}`}}</div>
      </div>
      <div class="item fixWidth">
        <div><van-icon name="clock" />活动类别</div>
        <div>{{data.lb}}</div>
      </div>
      <div class="item fixWidth">
        <div><van-icon name="clock" />报名人数上限</div>
        <div>{{bmrssx}}人</div>
      </div>
      <div class="item fixWidth">
        <div><van-icon name="clock" />报名时间</div>
        <div>{{`${bmkssj||'2019/06/08'}—${bmjzsj||'2019/06/08'}`}}</div>
      </div>
      <div class="item flex1">
        <div><van-icon name="clock" />活动计划</div>
        <div>
          <pre>{{hdjh}}</pre>
        </div>
      </div>
      <div class="item flex1">
        <div><van-icon name="clock" />活动简介</div>
        <div>
          <pre>{{hdts}}</pre>
        </div>
      </div>
    </div>
    <div class="tip">温馨提示：{{wxts}}</div>
    <button class="sign-btn" style="background: #ccc;" :disabled="true" v-if="data.isBm == 1">已报名</button>
    <button class="sign-btn" style="background: #ccc;" :disabled="true" v-else-if="data.sfkbm != '1' || data.hdgq == '1'">{{data.sfkbm == '0' ? '未开始' : data.hdgq == '1' ? '已过期' : '已失效'}}</button>
    <button class="sign-btn" @click="signUp" v-else-if="data.bmrssx > data.ybmgs">立即报名</button>
    <button class="sign-btn" style="background: #ccc;" :disabled="true" v-else-if="data.bmrssx <= data.ybmgs">已满</button>

    <!-- <button v-if="data.sfkbm != '1' || data.hdgq == '1'" class="sign-btn" style="background: #ccc;" :disabled="true">
      {{data.sfkbm == '0' ? '未开始' : data.hdgq == '1' ? '已过期' : '已失效'}}
    </button>
    <button v-else class="sign-btn" :style="showBm() == 0 ? 'background: #ccc;' : ''" :disabled="showBm() == 0 ? true : false" @click="signUp">
      {{data.isBm == 1 ? "已报名" : data.bmrssx > data.ybmgs ? "立即报名" : "已满"}}
    </button> -->
  </div>
</template>

<script>
import {hdxxquerydata4object, hdxxsavedata} from '../assets/js/api';
export default {
  data() {
    return {
      zt: '',
      kssj: '',
      jssj: '',
      hdlb: '',
      bmrssx: '',
      bmkssj: '',
      bmjzsj: '',
      hdjh: '',
      hdts: '',
      wxts: '',
      data: {},
      dspToken: localStorage.dspToken
    };
  },
  mounted() {
    hdxxquerydata4object({
      hdjhId: this.$route.query.id,
      dspToken: this.dspToken
    }).then(res => {
      if (res.code.status === '1') {
        let data = res.data[0];
        this.zt = data.zt;
        this.kssj = data.kssj;
        this.jssj = data.jssj;
        this.hdlb = data.hdlb;
        this.bmrssx = data.bmrssx;
        this.bmkssj = data.bmkssj;
        this.bmjzsj = data.bmjzsj;
        this.hdjh = data.hdjh;
        this.hdts = data.hdts;
        this.wxts = data.wxts;
        this.data = data;
      } else {
        this.$toast('获取数据失败');
      }
    });
  },
  methods: {
    showBm() {
      return this.data.isBm === 1 ? 0 : this.data.bmrssx > this.data.ybmgs ? 1 : 0;
    },
    signUp() {
      hdxxsavedata({
        hdjhId: this.$route.query.id,
        dspToken: this.dspToken
      }).then(res => {
        if (res.code.status === '1') {
          this.$toast('报名成功');
          setTimeout(() => {
            this.$router.back();
          }, 500);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.activityDetail {
  background: #f5f5f5;
  padding: 26px;
  .content {
    width: 100%;
    background-color: #ffffff;
    box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
    border-radius: 8px;
    padding: 26px;
    font-size: 34px;
    box-sizing: border-box;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 36px;
      span:first-child {
        font-weight: bold;
        color: #343434;
      }
      .red {
        color: #d42a2b;
      }
    }
    .item {
      display: flex;
      &:not(:last-child) {
        border-bottom: 1px solid #eeeeee;
        padding-bottom: 36px;
      }
      &:not(:first-child) {
        padding-top: 36px;
      }
      div:first-child {
        color: #888888;
        /deep/.van-icon {
          font-size: 28px;
          margin-right: 20px;
          vertical-align: middle;
        }
      }
      div:last-child {
        color: #353535;
      }
    }
    .fixWidth {
      align-items: center;
      div:first-child {
        width: 280px;
      }
      div:last-child {
        font-size: 30px;
        flex: 1;
        text-align: left;
      }
    }
    .flex1 {
      flex-direction: column;
      div {
        flex: 1;
        &:last-child {
          text-indent: 2em;
        }
        pre {
          margin: 0;
          margin-top: 10px;
        }
      }
    }
  }
  .tip {
    width: 659px;
    margin: 18px auto;
    font-size: 30px;
    color: #888888;
  }
  .sign-btn {
    border: none;
    width: 704px;
    height: 90px;
    background-color: #3198ed;
    box-shadow: 0px 5px 5px 0px rgba(89, 166, 250, 0.1);
    border-radius: 45px;
    line-height: 90px;
    color: #ffffff;
    font-size: 36px;
    text-align: center;
    letter-spacing: 7px;
  }
}
</style>
